<template>
    <view class="container">
        <view class="header">
            <view class="list">
                <view class="left">
                    <view class="title">欢迎使用</view>
                    <view class="small-title">防伪查询小程序</view>
                </view>

                <view
                    class="right"
                    @click="ToBusiness"
                    v-if="Object.getOwnPropertyNames(business).length === 0"
                >
                    <image src="/static/images/user-circle.png" />
                    登录
                </view>

                <view class="right" @click="ToBusiness" v-else>
                    <image :src="business.avatar_cdn" />
                    {{ business.nickname }}
                </view>
            </view>

            <view class="validate-input">
                <uv-input :placeholder="placeholderText" v-model="code">
                    <!-- #ifndef H5 -->
                    <template #suffix>
                        <uv-icon
                            size="28"
                            name="scan"
                            @click="onScanCode"
                        ></uv-icon>
                    </template>
                    <!-- #endif -->
                </uv-input>
            </view>
        </view>

        <view class="validate">
            <uv-button
                :customStyle="validateBtn"
                :plain="true"
                text="开始验证"
                @click="onValidate"
            ></uv-button>
        </view>
    </view>

    <!-- 消息提示 -->
    <uv-toast ref="NoticeRef"></uv-toast>
</template>

<script setup>
const { proxy } = getCurrentInstance();

// #ifndef H5
const placeholderText = ref('请输入防伪码或者扫防伪码');
// #endif

// #ifdef H5
const placeholderText = ref('请输入防伪码');
// #endif

const business = proxy.$business;

const code = ref('');

const NoticeRef = ref(null);

const validateBtn = ref({
    width: '100%',
    height: '100%',
    background: 'transparent',
    color: '#fff',
    border: '0px',
});

// #ifndef H5
// 在h5平台不会出现这段代码
const onScanCode = () => {
    if(business.value.hasOwnProperty('id') === false)
    {
        NoticeRef.value.show({
            type:'error',
            message:'请先登录'
        });

        return false;
    }

    uni.scanCode({
        success: (res) => {
            // 获取二维码的指定路径
            const path = res?.path ? res.path : '';

            uni.$uv.route(path);
        },
    });
}
// #endif

const onValidate = () =>
{
    // 去除左右两端的空格
    code.value = uni.$uv.trim(code.value);

    if(business.value.hasOwnProperty('id') === false)
    {
        NoticeRef.value.show({
            type:'error',
            message:'请先登录'
        });

        return false;
    }

    if(!code.value)
    {
        NoticeRef.value.show({
            type:'error',
            message:'请输入防伪码'
        });

        return false;
    }

    proxy.$uv.route('pages/validate/info',{code:code.value});
}

const ToBusiness = () => proxy.$uv.route('pages/business/index');
</script>

<style lang="scss">
@import '@/static/styles/theme.scss';

.header {
    height: 90vw;
    background: linear-gradient(135deg, $primary-color 0%, lighten($primary-color, 20%) 100%);
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    padding-top: 10vh;
    box-shadow: 0 4px 20px rgba($primary-color, 0.2);

    .list {
        color: #fff;
        display: flex;
        justify-content: space-between;
        padding: 0 30rpx;

        .left {
            .title {
                font-size: 48rpx;
                font-weight: 600;
                margin-bottom: 16rpx;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            }

            .small-title {
                font-size: 32rpx;
                opacity: 0.9;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            }
        }

        .right {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.95);
            padding: 12rpx 24rpx 12rpx 32rpx;
            color: $primary-color;
            font-size: 28rpx;
            border-top-left-radius: 40rpx;
            border-bottom-left-radius: 40rpx;
            height: 70rpx;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.98);
                background: rgba(255, 255, 255, 0.9);
            }

            image {
                width: 44rpx;
                height: 44rpx;
                margin-right: 16rpx;
                border-radius: 50%;
            }
        }
    }

    .validate-input {
        width: 85%;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        overflow: hidden;
        margin: 0 auto;
        margin-top: 20vw;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

        :deep(.uv-input) {
            padding: 24rpx 32rpx;
            font-size: 32rpx;
        }

        :deep(.uv-icon) {
            color: $primary-color;
            padding: 20rpx;
            margin-right: 16rpx;
            font-size: 40rpx;
            
            &:active {
                opacity: 0.8;
            }
        }
    }
}

.validate {
    width: 220rpx;
    height: 220rpx;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, $primary-color 0%, darken($primary-color, 15%) 100%);
    margin: 0 auto;
    margin-top: -110rpx;
    box-shadow: 0 8px 30px rgba($primary-color, 0.3);
    transition: all 0.3s ease;

    &:active {
        transform: scale(0.95);
        box-shadow: 0 4px 15px rgba($primary-color, 0.2);
    }
}

:deep(.uv-button-wrapper) {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .uv-button__text {
        font-size: 36rpx;
        font-weight: 600;
        letter-spacing: 4rpx;
    }
}
</style>
